<template>
	<div class="mobile-search">
		<div class="search">
			<router-link to="/mobile/home"><</router-link>
				<form @submit.prevent="setSearch()">
					<input type="search" placeholder="请输入书名,作者,出版社" required v-model="keywords" />
					<input type="submit" value="搜索" />
				</form>
		</div>
		<aside class="aside1" v-show="act==0">
			<span>历史搜索</span>
			<button @click="ClearAll()"><i class="el-icon-delete"></i>清空历史记录</button>
		</aside>
		<div class="history" v-show="act==0">
			<span v-for="(item,i) in hlist" :key="i"><button @click="getSearch(item)">{{item}}</button></span>
		</div>
		<div class="select">
			<ul v-for="item in list" v-show="act==1">
				<router-link :to="`/mobile/bookdetail/${item.id}`">
				<li>
					<img :src="`${$ip}/api/public/showimg/${item.pic}`"/>
					<aside>
						<h3>{{item.name}}</h3>
						<p>价格:{{item.price}}</p>
					</aside>
					<button @click="add()"><i class="el-icon-shopping-cart-1"></i></button>
				</li>
				
				</router-link>
			</ul>
		</div>
		<div class="books swiper-container presslist" v-show="act==0">
			<div class="swiper-wrapper">
				<div class="d1 swiper-slide">
					<header>
						<h3>热销榜</h3>
					</header>
					<ul v-for="(item,index) in hotlist" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`">
						<li v-if="item.hot!=0 && index < 5">
							<img :src="`${$ip}/api/public/showimg/${item.picture}`" />
							<aside>
								<h3>{{item.memo}}</h3>
								<p>热度:{{item.hot}}</p>
							</aside>
						</li>
						</router-link>
					</ul>
					<router-link to="/mobile/booklist">查看更多 ></router-link>
				</div>
				<div class="d1 swiper-slide">
					<header>
						<h3>新书榜</h3>
					</header>
					<ul v-for="(item,index) in newslist" :key="item.id">
						<router-link :to="`/mobile/bookdetail/${item.id}`">
						<li v-if="item.price!=0 && index < 5">
							<img :src="`${$ip}/api/public/showimg/${item.pic}`" />
							<aside>
								<h3>{{item.name}}</h3>
								<p>￥:{{item.price}}</p>
							</aside>
						</li>
						</router-link>
					</ul>
					<router-link to="/mobile/booklist">查看更多 ></router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 导入swiper组件内容 【周期函数内，第一第二阶段，如果是请求的数据进行轮播，建议在第三阶段/监听器内执行】
	import Swiper from 'swiper';
	// 导入vuex的对象
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MobileSearch',
		data() {
			return {
				act:0,
				keywords: '',
				hotlist:[],
				newslist:[],
				page:{
					num: 1,
					lines: 5,
					total: 0
				},
				list:[]
			}
		},
		computed: {
			...mapState('search', ['hlist']),
		},
		methods: {
			// 格式：mapActions( '模块名',['调用模块内的方法'] )
			...mapActions('search', ['actionHistory', 'delHistory']),

			setSearch() {
				this.act=1;
				// 调用search模块的函数actionHistory,并将当前组件的data数据传递过去vuex
				this.actionHistory(this.keywords);
				this.$postkv("/api/public/book/findPageKey/"+this.page.num + "/" + this.page.lines,{key:this.keywords}).then((resp)=>{
				this.list =resp.data.data.books;
				console.log(this.list);
				})
			},
			getSearch(item){
				this.keywords =item;
				this.setSearch();
			},
			ClearAll() {
				this.delHistory();
			},
			add(){
				
			}
		},
		mounted(){
			// 调用轮播对象
			new Swiper('.pubilcationDate,.presslist', {
				// 调整轮播之间的间距
				spaceBetween : 20,
				// 设置根据宽度
				slidesPerView : 'auto',
			})
			// 热门书籍
			this.$get("/api/public/findHot/1/5").then((resp)=>{
				this.hotlist =resp.data.data;
				console.log(this.hotlist);
			})
			//新书上市
			this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
				this.newslist =resp.data.data.books;
				console.log(this.newslist);
			})
		},
	}
</script>

<style scoped>
	.mobile-search {
		width: 100%;
	}
	.mobile-search .search {
		width: 100%;
		height: 5rem;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
	}

	.mobile-search .search a {
		font-size: 1.8rem;
		margin-left: 0.8rem;
		line-height: 3rem;
		color: #000000;
	}

	.mobile-search .search form {
		width: 100%;
		height: 3.5rem;
		line-height: 3.5rem;
		margin: 0 auto;
	}

	.mobile-search .search input[type="search"] {
		width: 80%;
		line-height: 2.2rem;
		border-radius: 0.8rem;
		border: none;
		margin-left: 1rem;
		text-indent: 0.8rem;
	}

	.mobile-search .search input[type="submit"] {
		line-height: 2.2rem;
		border: none;
		margin-left: 0.5rem;
		background-color: #f6f6f6;
		font-size: 0.9rem;
	}

	.mobile-search .aside1 {
		width: 100%;
		height: 3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mobile-search .aside1 span {
		margin-left: 0.8rem;
		font-size: 1.1rem;
	}

	.mobile-search .aside1 button {
		margin-right: 0.8rem;
		border: none;
		border-radius: 0.4rem;
		border: 1px solid #f6f6f6;
		font-size: 1rem;
	}
	.mobile-search .aside1 i {
		margin-right: 0.5rem;
	}

	.mobile-search .history {
		width: 80%;
		margin-left: 1rem;
	}

	.mobile-search .history button {
		height: 2rem;
		line-height: 2rem;
		border: none;
		border-radius: 0.8rem;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
		background-color: #eaeaea;
		margin: 0.4rem auto;
		margin-right: 1rem;
		font-size: 1rem;
	}

	.mobile-search .books {
		width: 90%;
		margin-left: 0.8rem;
		margin-top: 1rem;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
	}
	.mobile-search .books .d1 header {
		width: 100%;
		line-height: 3rem;
		color: #c42635;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		background: linear-gradient(#fbefef, #fcf7f4);
	}
	.mobile-search .books .d1{
		width: 60%;
		border: 1px solid #ececec;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		margin: 0 auto;
	}
	.mobile-search .books .d1 header h3 {
		margin-left: 0.8rem;
	}

	.mobile-search .books .d1 ul {
		width: 100%;
	}

	.mobile-search .books .d1 ul li {
		width: 96%;
		height: 7rem;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.mobile-search .books .d1 ul li img {
		width: 30%;
		height: 5rem;
	}

	.mobile-search .books .d1 ul li aside {
		width: 100%;
		height: 6rem;
		margin-left: 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile-search .books .d1 ul li aside h3 {
		width: 100%;
		margin-top: 0.5rem;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mobile-search .books .d1 ul li aside p {
		margin-top: 0.5rem;
		font-size: 13px;
		color: #BD1133;
	}
	.mobile-search .books .d1 a{
		width: 100%;
		line-height: 2rem;
		color: #bd485e;
		display: flex;
		justify-content: center;
	}
	.mobile-search .select{
		width: 98%;
		border: 1px solid #ececec;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
		margin: 0 auto;
		background-color: #ececec;
	}
	.mobile-search .select ul li {
		width: 96%;
		height: 8rem;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	
	.mobile-search .select ul li img {
		width: 30%;
		height: 6rem;
	}
	
	.mobile-search .select ul li aside {
		width: 100%;
		height: 8rem;
		margin-left: 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 1.5rem;
	}
	
	.mobile-search .select ul li aside h3 {
		width: 100%;
		margin-top: 0.5rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.mobile-search .select ul li aside p {
		margin-top: 0.8rem;
		color: #d6133a;
	}
	.mobile-search .select ul li button{
		width: 2rem;
		height: 1.8rem;
		background-color: #f51542;
		border: none;
		border-radius: 4px;
		margin-top: 0.8rem;
	}
	.mobile-search .select ul li button i{
		color: white;
		font-size: 20px;
	}
</style>
